<template>
    <div class="add-admin">
        <form @submit.prevent="submit" class="form-container">
            <span style="color: grey;">只有顶级管理员拥有添加管理员资格</span>
            <h2 class="title">添加管理员</h2>
            
            <div class="form-control">
                <label for="username">用户名：</label>
                <input type="text" id="username" v-model="username" required>
            </div>
            <div class="form-control">
                <label for="password">密码：</label>
                <input type="password" id="password" v-model="password" required>
            </div>
            <div class="form-control">
                <label for="identity">身份：</label>
                <el-select v-model="identity" placeholder="请选择管理员身份">
                    <el-option label="普通管理员" :value="0">
                        <el-tag type="primary">普通管理员</el-tag>
                    </el-option>
                    <el-option label="顶级管理员" :value="1">
                        <el-tag type="warning">顶级管理员</el-tag>
                    </el-option>

                </el-select>
            </div>
            <button type="submit" :disabled="!isValid">添加管理员</button>
        </form>
    </div>
</template>
    
<script>
import MGTAPI from '../../api/management';

export default {
    data() {
        return {
            username: '',
            password: '',
            identity: 0
        };
    },
    methods: {
        submit() {
            let data = {}
            data.username = this.username
            data.password = this.password
            data.issystem = this.identity
            MGTAPI.addAdminApi(data).then(res => {
                console.log(res)
                if (res.data.code) {
                    this.$message.success(res.data.data)
                } else {
                    this.$message.error(res.data.msg)
                }
            })
            // 清空输入框
            this.username = '';
            this.password = '';
        }
    },
    computed: {
        isValid() {
            return this.username !== '' && this.password !== '';
        }
    }
};
</script>
    
<style scoped>
.add-admin {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    background-color: #fff;
}

.form-container {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 40px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
}

.title {
    font-size: 24px;
    margin-bottom: 40px;
    text-align: left;
}

.form-control {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    align-items: flex-start;
    width: 100%;
}

label {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

input {
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 16px;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

button {
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    padding: 10px 20px;
}

button:disabled {
    background-color: #ddd;
    color: #999;
    cursor: default;
}
</style>